<template>
  <div>
    <vxe-form ref="formRef" :data="formData">
      <vxe-form-item title="编号方式" field="name" span="24" :item-render="{}">
        <template #default="params">
          <el-radio-group v-model="formData.dataType" @change="changeEvent(params)">
            <el-radio :value="1" label="指定位" content="指定位数" ref="buttonRef" />
            <el-radio :value="2" label="自然数" content="自然数" />
          </el-radio-group>
        </template>
      </vxe-form-item>
      <vxe-form-item title="开始数值" field="begin" span="24" :item-render="{}">
        <template #default="params">
          <el-input-number v-model="formData.begin" @change="changeEvent(params)" :min="1" />
        </template>
      </vxe-form-item>
      <vxe-form-item title="重置周期" field="resetCycle" span="24" :item-render="{}">
        <template #default="params">
          <el-select
            v-model="formData.resetCycle"
            placeholder="Select"
            size="mini"
            @change="changeEvent(params)"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </vxe-form-item>
    </vxe-form>
    <el-popover
      ref="popoverRef"
      :virtual-ref="buttonRef"
      trigger="click"
      title=""
      virtual-triggering
    >
      <el-input-number
        v-model="formData.complementZero"
        :min="0"
        :max="10"
        @change="changeEvent(params)"
      />
    </el-popover>
  </div>
</template>

<script lang="ts" setup>
import { VxeFormInstance } from 'vxe-pc-ui'
import {
  padZero,
  SnWidgetDataType
} from '@/components/FormCreate/src/config/SerialNumber/UseSerialNumberRule'

// const props = defineProps<{
//   text: string
//   modelValue: FormDataVO
// }>()

interface FormDataVO {
  resetCycle: number
  begin: string
  dataType: number
  complementZero: number
}

const props = defineProps<{
  modelValue: SnWidgetDataType
}>()

// const props = withDefaults(defineProps, {
//   modelValue: {
//     dataType: 1,
//     complementZero: 4,
//     resetCycle: 1,
//     begin: 4
//   }
// })()

const formRef = ref<VxeFormInstance<FormDataVO>>()
const formProps = ref<any>(props.modelValue)


const label = formProps.value.label
const formData = formProps.value.value

// const formData = ref<FormDataVO>({
//   dataType: 1,
//   complementZero: 4,
//   resetCycle: 1,
//   begin: 4
// })

const options = [
  {
    value: 6,
    label: '年度'
  },
  {
    value: 5,
    label: '季度'
  },
  {
    value: 4,
    label: '月度'
  },
  {
    value: 3,
    label: '当周'
  },
  {
    value: 2,
    label: '当天'
  },
  {
    value: 1,
    label: '永不'
  }
]
const changeEvent = (params: any) => {
  // debugger
  const $form = formRef.value
  if ($form) {
    if (params) {
      $form.updateStatus(params)
    }
  }

  updateParent()
}

const buttonRef = ref()
const popoverRef = ref()
const onClickOutside = () => {
  unref(popoverRef).popperRef?.delayHide?.()
}

const emit = defineEmits(['update:data'])

const formatNumber = () => {
  let beginNumber = formData.begin
  let bqNumber = 0
  let bqNumberType = formData.dataType
  if (bqNumberType == 1) {
    bqNumber = formData.complementZero
  }
  return padZero(beginNumber, bqNumber)
}
//
// onMounted(() => {
//   // updateParent()
// })

const updateParent = () => {


  emit('update:data', {
    label: formatNumber(),
    value: formData
  })
}
</script>

<style scoped>
.sn-fixed-str {
  margin: 5px;
  padding: 5px;
  border: 1px solid #ccc;
  display: inline-block;
}

.data-input-assign {
  input[type='number'] {
    width: 10px !important;
  }
}
</style>
